<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="../cwjy/css/app.css" rel="stylesheet">
    <style>
        html::-webkit-scrollbar {
            display: none
        }
    </style>
</head>
<script src="../cwjy/js/app.js"></script>
<script src="../cwjy/js/jquery.min.js"></script>
<body>
<div class="card">
    <div class="card-header">
        <div>
            <div style="float:left;">
                <span style="font-weight: bold;font-size: 20px;text-shadow: 1px 1px 2px #000000;">商品评价管理</span>
            </div>
            <!--      <div style="float: right;margin-right: 7%">
                      <button type="button" class=" " data-feather="plus-circle" data-toggle="modal"
                              data-target="#defaultModalPrimary" onclick="initMode('addData()')"></button>
                  </div>-->
        </div>
        <table class="table table-striped" cellpadding="0" cellspacing="0">
            <thead>
            <tr>
                <th style="width:22%;text-align: center">序号</th>
                <th style="width:22%;text-align: center">商品名称</th>
                <th style="width:22%;text-align: center">商品图片</th>
                <th style="width:22%;text-align: center">评价数量</th>
            </tr>
            </thead>
            <tbody id="tbodyDiv">

            </tbody>
        </table>
    </div>
</div>

<!--模态框-->

<div class="modal fade" id="defaultModalPrimary" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content" style="width: 150%;margin-left: -25%;margin-top: 15%">
            <div class="modal-header" id="modelHead"><h3 class="modal-title" id="modelHeadText"
                                                         style="font-weight: bold;text-shadow: 1px 1px 3px #000000;">
                评论详细</h3>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">×</span>
                </button>
            </div>
            <div class="modal-body m-3">
                <div class="card-body" id="modelDiv" style="margin-top: -2%;font-weight: bold">
                    <div class="row">
                        <ul id="productReviewsUi">


                        </ul>
                    </div>
                </div>
            </div>
            <div class="modal-footer" id="modelAction">

            </div>
        </div>
    </div>
    <script type="text/javascript" src="../cwjy/js/ajaxAll.js"></script>
    <script type="text/javascript">


        let PageProductReviewsDataCache;

        function getPageProductReviews() {
            let url = "http://localhost:8888/cwjy/Commodity/getProductReviews";
            let json = {};
            $.ajax({
                type: 'post',
                async: false,            //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
                url: url,    //请求发送到Servlet
                contentType: 'application/json;charset=UTF-8',//指定消息请求类型
                data: JSON.stringify(json),
                timeout: 10000,    //超时10s
                success: function (res) { returnLogin(res);
                    PageProductReviewsDataCache = res.data;
                    forEachPageProductReviewsDateCache();
                },
                error: function (errorMsg) {
                    //请求失败时执行该函数
                    alert('数据请求失败!');
                }
            });
        }

        let CommentDetailsIdCache = "";
        function CommentDetails(id) {
            CommentDetailsIdCache = id;
            let data = getDataIdData(PageProductReviewsDataCache, id).product_reviews_list;
            let productReviewsUi = "";
            for (let i = 0; i < data.length; i++) {
                let temp = "     <li style=\"list-style-type:none\" id=\"top\">\n" +
                    "                                <div style=\"border-left:2px solid #f5f6f7;margin-bottom: 10px\" id = \"" + data[i].commentator + "," + data[i].id + "\">\n" +
                    "                                    <img src=\"http://localhost:8888/cwjy/images/"+data[i].user_images+"\" style=\"width: 30px;height: 30px;margin-right: 10px;border-radius:50%; overflow:hidden;\">\n" +
                    "                                    <span>" + data[i].commentator + "：</span>\n" +
                    "                                    <span>" + data[i].information + "\n" +
                    "                                            <a href=\"#\" class='send'>回复</a>\n" +
                    "                                            <a href=\"#\" class='delete'>删除</a>\n" +
                    "                                            </span>\n" +
                    "                                </div>\n" +
                    "                                <ul>";
                let child = data[i].product_reviews_list;
                let childDiv = "";
                for (let j = 0; j < child.length; j++) {
                    let childTemp = "<li style=\"list-style-type:none\">\n" +
                        "                                    <div style=\"margin-left: 30px;border-left:2px solid #CCC;margin-bottom: 10px\" id=\"" + child[j].commentator + "," + child[j].id + "\">\n" +
                        "                                        <img src=\"http://localhost:8888/cwjy/images/"+data[i].user_images+"\"\n" +
                        "                                             style=\"width: 30px;height: 30px;margin-right: 10px;border-radius:50%; overflow:hidden;\">\n" +
                        "                                        <span>" + child[j].commentator + " 回复 " + child[j].receiver + "：</span>\n" +
                        "                                        <span>" + child[j].information + "\n" +
                        "                                            <a href=\"#\" class='send'>回复</a>\n" +
                        "                                            <a href=\"#\" class='delete'>删除</a>\n" +
                        "                                            </span>\n" +
                        "                                    </div>\n" +
                        "                                </li>";
                    childDiv += childTemp;
                }
                temp = temp + childDiv + "\n" +
                    "                                </ul>\n" +
                    "                            </li>";
                productReviewsUi += temp;
            }
            $('#productReviewsUi').html(productReviewsUi)
            initSendMethod();
            initDeleteMethod();
        }

        function forEachPageProductReviewsDateCache() {
            let tbodyDiv = "";
            for (let i = 0; i < PageProductReviewsDataCache.length; i++) {
                let temp = "      <tr>\n" +
                    "                <td style=\"text-align: center\">" + (i + 1) + "</td>\n" +
                    "                <td style=\"text-align: center\">" + PageProductReviewsDataCache[i].product_name + "</td>\n" +
                    "                <td style=\"text-align: center\"><img src=\"http://localhost:8888/cwjy/images/" + PageProductReviewsDataCache[i].image_path + "\" width=\"50px\" height=\"50px\"></td>\n" +
                    "                <td style=\"text-align: center\"><a data-toggle=\"modal\"\n" +
                    "                                                  data-target=\"#defaultModalPrimary\" onclick='CommentDetails(\"" + PageProductReviewsDataCache[i].id + "\")'>" + PageProductReviewsDataCache[i].evaluation + "</a></td>\n" +
                    "            </tr>";
                tbodyDiv += temp;
            }
            $('#tbodyDiv').html(tbodyDiv)
            feather.replace();
        }

        getPageProductReviews();

        function inita() {
            let temp = "<li style=\"list-style-type:none\">\n" +
                "                                    <div style=\"margin-left: 30px;border-left:2px solid #CCC;margin-bottom: 10px\">\n" +
                "                                        <img src=\"../cwjy/img/avatars/avatar-3.jpg\"\n" +
                "                                             style=\"width: 30px;height: 30px;margin-right: 10px;border-radius:50%; overflow:hidden;\">\n" +
                "                                        <span>F1333458 回复 F1333457：</span>\n" +
                "                                        <span>asdsa\n" +
                "                                            <a href=\"#\" class='send'>回复</a>\n" +
                "                                            <a href=\"#\" class='delete'>删除</a>\n" +
                "                                            </span>\n" +
                "                                    </div>\n" +
                "                                </li>";
            $('#ulTest').append(temp)
        }

        inita();


        function cancelReply() {
            $('#hfck').remove();
        }

        function addPl() {
            $('#sendHH').unbind("click");
            $('#sendHH').click(function () {
                let commentator = $(this).parent().parent().parent().parent()[0].id;
                let idAndName = commentator.split(",");
                let isTop = $(this).parent().parent().parent().parent().parent();
                let parentSl = $(this).parent().parent().parent().parent().parent().parent();
                let sendInfo = $('#sendInfo').val();
                $('#hfck').remove();
                let temp = "<li style=\"list-style-type:none\" >\n" +
                    "                                    <div style=\"margin-left: 30px;border-left:2px solid #CCC;margin-bottom: 10px\" id='F1333458'>\n" +
                    "                                        <img src=\"../cwjy/img/avatars/avatar-3.jpg\"\n" +
                    "                                             style=\"width: 30px;height: 30px;margin-right: 10px;border-radius:50%; overflow:hidden;\">\n" +
                    "                                        <span>F1333458 回复 " + idAndName[0] + "：</span>\n" +
                    "                                        <span>" + sendInfo + "\n" +
                    "                                            <a href=\"#\" class='send'>回复</a>\n" +
                    "                                            <a href=\"#\" class='delete'>删除</a>\n" +
                    "                                            </span>\n" +
                    "                                    </div>\n" +
                    "                                </li>";
                if (isTop[0].id === 'top') {
                    isTop.children("ul").prepend(temp);
                } else {
                    parentSl.prepend(temp);
                }
                initSendMethod();
                initDeleteMethod();
                let url = "http://localhost:8888/cwjy/ProductReviewsCommodity/insertSend";
                let json = {id: idAndName[1], "information": sendInfo};
                let success = "回复成功！";
                let error = "回复失败";
                ajaxUnifiedCallUpdateAndAddRemoveReload(url, json, success, error)
                getPageProductReviews();
                CommentDetails(CommentDetailsIdCache);
            })
        }


        function initDeleteMethod() {
            $('#modelDiv .delete').unbind("click");
            $('#modelDiv .delete').click(function () {
                if (confirm("是否确认删除评论！")) {
                    let idAndName = $(this).parent().parent()[0].id.split(",");
                    let url = "http://localhost:8888/cwjy/ProductReviewsCommodity/deleteByPrimaryKey";
                    let json = {id: idAndName[1]};
                    let success = "删除成功！";
                    let error = "删除失败";
                    ajaxUnifiedCallUpdateAndAddRemoveReload(url,json,success,error);
                    getPageProductReviews();
                    CommentDetails(CommentDetailsIdCache);
                }
            })
        }

        function initSendMethod() {
            $('#modelDiv .send').unbind("click");
            $('#modelDiv .send').click(function () {
                $('#hfck').remove();
                let hhpl = "   <div class=\"mb-3 col-md-12\" id =\"hfck\">\n" +
                    "                                    <textarea  class=\"form-control\" id=\"sendInfo\" style=\"margin-top: 10px;height: 100px;resize: none;\"></textarea>\n" +
                    "                                    <div style=\"float: right;margin-top: 10px;width: 100%\">\n" +
                    "                                        <button type=\"button\" style=\"float: right;\" class=\"btn btn-outline-secondary\" onclick='cancelReply()'>关闭回复</button>\n" +
                    "                                        <button type=\"button\" class=\"btn btn-outline-success\" style=\"float: right;margin-right: 10px\" id='sendHH'>提交回复</button>\n" +
                    "                                    </div>\n" +
                    "                                </div>";
                $(this).parent().append(hhpl)
                addPl();
            })
        }


        /*  function addType() {
              addNodeMessage("")
              feather.replace();
              initClassificationDetailedClick();
          }

          function addNodeMessage(name) {
              let temp = "    <div class=\"col-md-12\" >\n" +
                  "                                    <div class=\"col-md-11\" style=\"float: left\">\n" +
                  "                                        <input type=\"text\" class=\"form-control \"\n" +
                  "                                               placeholder=\"类型名称\" value='"+name+"' style=\"margin-bottom: 10px\">\n" +
                  "                                    </div>\n" +
                  "                                    <div class=\"col-md-1\" style=\"float: left\">\n" +
                  "                                   <span>     <button type=\"button\" data-feather=\"x-circle\"\n" +
                  "                                                style=\"float: right;margin-top: 15%;color: red\"></button>\n" +
                  "                                    </div></span>\n" +
                  "                                </div>";
              $('#classification_detailed').append(temp)
          }

          function initClassificationDetailedClick() {
              $('#classification_detailed span').unbind("click")
              $('#classification_detailed span').click(function () {
                  if (confirm('是否删除该节点?')) {
                      $(this).parent().parent().remove()
                  }
              })
          }
          initClassificationDetailedClick();
          function addData() {
              let classification_name = $('#classification_name');
              let type_name = $('#classification_detailed')
              console.log(classification_name.val())
              type_name.find("input").each(function () {
                  console.log($(this).val())
              })
          }
          function initMode(onType) {
              let modiv = "<div class=\"mb-3 col-md-12\">\n" +
                  "                            <label class=\"form-label\" for=\"classification_name\">类别名称</label>\n" +
                  "                            <input type=\"email\" class=\"form-control\" id=\"classification_name\" placeholder=\"类别名称\">\n" +
                  "                        </div>\n" +
                  "                        <div class=\"mb-3  col-md-12\">\n" +
                  "                            <label class=\"form-label\">类型名称</label>\n" +
                  "                            <button type=\"button\" class=\"form-label\" for=\"type_name\" data-feather=\"plus-circle\"\n" +
                  "                                    style=\"float: right\" onclick=\"addType()\"></button>\n" +
                  "                            <div id=\"classification_detailed\">\n" +
                  "                                <div class=\"col-md-12\">\n" +
                  "                                    <div class=\"col-md-11\" style=\"float: left\">\n" +
                  "                                        <input type=\"text\" class=\"form-control \"\n" +
                  "                                               placeholder=\"类型名称\" style=\"margin-bottom: 10px\">\n" +
                  "                                    </div>\n" +
                  "                                    <div class=\"col-md-1\" style=\"float: left\">\n" +
                  "                                        <span>\n" +
                  "                                        <button type=\"button\" data-feather=\"x-circle\"\n" +
                  "                                                style=\"float: right;margin-top: 15%;color: red\"\n" +
                  "                                        ></button>\n" +
                  "                                            </span>\n" +
                  "                                    </div>\n" +
                  "                                </div>\n" +
                  "                            </div>\n" +
                  "                        </div>";
              $('#modelDiv').html(modiv)

              let modelHead = " <h3 class=\"modal-title\" id='modelHeadText'>类别增加</h3>\n" +
                  "                <button type=\"button\" class=\"close\" data-dismiss=\"modal\" aria-label=\"Close\">\n" +
                  "                    <span aria-hidden=\"true\">&times;</span>\n" +
                  "                </button>";

              $('#modelHead').html(modelHead)

              let modelAction = " <button type=\"button\" class=\"btn btn-secondary\" data-dismiss=\"modal\">Close</button>\n" +
                  "                <button type=\"button\" class=\"btn btn-primary\" onclick=\""+onType+"\">Save changes</button>";
              $('#modelAction').html(modelAction)
              feather.replace();
          }



          function initModeViewDetails(){
              let modelHead = "<h3 class=\"modal-title\">类别详细</h3>\n" +
                  "                   <button type=\"button\" class=\"close\" data-dismiss=\"modal\" aria-label=\"Close\">\n" +
                  "                       <span aria-hidden=\"true\">&times;</span>\n" +
                  "                   </button>";
              let modelDiv = "   <h1>类别名称</h1>\n" +
                  "                    <p class=\"text-muted\">Etiam rhoncus. Maecendio et ante tincidunt tempus. Donec vitae sapien ut libero.</p>\n" +
                  "                    <h1>类型详细</h1>\n" +
                  "                    <p class=\"text-muted\">Etiam rhoncus. Maecenatincidunt tempus. Donec vitae sapien ut libero.</p>\n" +
                  "                    <p class=\"text-muted\">Etiam rhoncus. Maecenatincidunt tempus. Donec vitae sapien ut libero.</p>\n" +
                  "                    <p class=\"text-muted\">Etiam rhoncus. Maecenatincidunt tempus. Donec vitae sapien ut libero.</p>\n" +
                  "                    <p class=\"text-muted\">Etiam rhoncus. Maecenatincidunt tempus. Donec vitae sapien ut libero.</p>";
              let modelAction = "  <button type=\"button\" class=\"btn btn-secondary\" data-dismiss=\"modal\">Close</button>";
              $('#modelHead').html(modelHead)
              $('#modelDiv').html(modelDiv)
              $('#modelAction').html(modelAction)
          }

          function updateText() {
              initMode('updateData()');
              $('#classification_detailed').html("")
              $('#modelHeadText').html("类型修改")
              $('#classification_name').val("测试")
              for (let i = 0; i < 5; i++) {
                  addNodeMessage("测试" + i);
              }
              initClassificationDetailedClick();
              feather.replace();
          }
          function updateData() {
              alert('修改成功')
          }

      */
    </script>
</div>
</body>
</html>